<!--
 * @Author: your name
 * @Date: 2021-07-22 14:43:49
 * @LastEditTime: 2021-08-20 13:50:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /sports-wechat/activity/matchInfo/components/rankingList.vue
-->
<template>
  <view :class="['list-wrap', groupList.length ? '' : 'margin-top']">
    <view class="ranking-list">
      <view class="list-item head border-bottom-1px">
        <view>组/队</view>
        <view>球员名</view>
        <view>胜场</view>
        <view>负场</view>
        <view>净胜</view>
        <view>排名</view>
      </view>
      <template v-if="rankingList.length">
          <view :class="['list-item',
          index < rankingList.length ? 'border-bottom-1px' : '',
          !rankShowAll && index > 2 ? 'hidden' : '',
          item.actEventTeamEnterList.some(ii => (ii.userId == userData.id)) ? 'check-bg' : ''
          ]" v-for="(item, index) in rankingList" :key="item.id">
            <view>{{item.teamCode}}</view>
            <view :class="['player']">
              <text v-for="player in item.actEventTeamEnterList" :key="player.id" :class="['line-clamp-one', player.userId == userData.id ? 'check-text': '']">{{player.relName}}</text>
            </view>
            <view>{{item.winGames}}</view>
            <view>{{item.loseGames}}</view>
            <view>{{item.goalDifference}}</view>
            <view class="action">
              <text>{{item.ranking}}</text>
              <!-- <text v-if="item.showButton == 1" class="btn win" @click="$emit('rankChooseWin', item, 'grade')">晋级</text>
              <text v-if="item.showButton == 2" class="btn choose" @click="$emit('rankChooseWin', item, 'choose')">裁判</text> -->
            </view>
            <template v-if="currentChoose < active">
              <!-- 单循环 -->
              <view class="single list-icon" v-if="sportEventId == 20 && index < 3">
                <image v-if="index === 0" :src="'@/static/images/match/ranking_win_one_left.png'|addBaseImgUrl" mode="" />
                <image v-if="index === 1" :src="'@/static/images/match/ranking_win_two_left.png'|addBaseImgUrl" mode="" />
                <image v-if="index === 2" :src="'@/static/images/match/ranking_win_three_left.png'|addBaseImgUrl" mode="" />
              </view>
              <!-- 循环淘汰 -->
              <view class="group list-icon" v-if="sportEventId == 10 && index < 2">
                <image :src="'@/static/images/match/ranking_t_win_left.png'|addBaseImgUrl" mode="" />
              </view>
            </template>
        </view>
        <!-- 收起展开 -->
        <view class="action-wrap" v-if="rankingList.length > 3" @click="$emit('showToogle', 'rank')">
          <view class="icon-info">
            <view :class="['icon', rankShowAll ? 'up' : 'down']"></view>
          </view>
          <text>{{rankShowAll ? '收起' : '展开'}}</text>
        </view>
      </template>
      <view class="empty" v-else>
        <xjx-nodata marginTop="20px"></xjx-nodata>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: [ 'rankingList', 'rankShowAll', 'groupList', 'sportEventId', 'active', 'currentChoose', 'userData'],
    methods: {}
  }
</script>

<style lang="scss" scoped>
.list-wrap {
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
  margin-top: 88rpx;
  &.margin-top {
    margin-top: 20rpx;
  }
  .ranking-list {
    width: 100%;
    background: #fff;
    border-radius: 15rpx;
    .list-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      min-height: 90rpx;
      align-items: center;
      box-sizing: border-box;
      padding: 30rpx 0;
      &.check-bg {
        background: #EEF5FE;
      }
      >view {
        display: block;
        min-width: 110rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        color: #333;
        text-align: center;
        z-index: 2;s
        &:nth-of-type(2) {
          width: 160rpx;
        }
      }
      .head>view {
        color: #999;
      }
      .player {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text {
          font-size: 28rpx;
          line-height: 28rpx;
          margin-bottom: 10rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 116rpx;
          &:last-of-type {
            margin-bottom: 0;
          }
        }
        .check-text {
          color: #2E87FF;
        }
      }
      &.hidden {
        display: none;
      }
      .action {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 3;
        text {
          font-size: 28rpx;
          line-height: 28rpx;
          color: #333;
          text-align: center;
        }
        .btn {
          background: #6BA9FE;
          border-radius: 5rpx;
          padding: 10rpx 20rpx;
          font-size: 24rpx;
          color: #fff;
          margin-top:10rpx;
        }
      }
      .list-icon {
        width: 80rpx;
        height: 67rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        image {
          width: 80rpx;
          height: 67rpx;
        }
      }
    }
    .empty {
      padding-bottom: 40px;
    }
  }
  .action-wrap {
    width: 100%;
    height: 128rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .icon-info {
      width: 60rpx;
      height: 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #E8E8E8;
      border-radius: 15rpx;
      .icon {
        width: 30rpx;
        height: 17rpx;
        &.up {
          background:url();
          background-size: 100% 100%;
        }
        &.down {
          background:url();
          background-size: 100% 100%;
        }
      }
    }
    text {
      font-size: 24rpx;
      line-height: 24rpx;
      color: #999;
      margin-top: 20rpx;
    }
  }
}
</style>